<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no, width=device-width, height=device-height" />
    <title>QuoJS 3.0.0</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            overflow-x: hidden;
        }
        ul {
            margin: 0;
            padding: 2px;
        }
        ul > li {
            -webkit-transform: translateX(0px);
            list-style: none;
            background-color: green;
            margin-top: 2px;
            height: 100px;
        }
        ul > li:nth-child(odd) {
            background-color: blue;
        }
        .logger {
            z-index: 2;
            position: fixed;
            top: 0;
            right: 0;
            height: 100%;
            width: 300px;
            background-color: rgba(0,0,0,0.5);
            color: white;
        }
    </style>
</head>
<body>
    <div class="logger"></div>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
    </ul>
    <script src="../bower/quo.js"></script>
    <script src="../bower/quo.ajax.js"></script>
    <script src="../bower/quo.css.js"></script>
    <script src="../bower/quo.element.js"></script>
    <script src="../bower/quo.environment.js"></script>
    <script src="../bower/quo.output.js"></script>
    <script src="../bower/quo.query.js"></script>
    <script src="../bower/quo.events.js"></script>
    <script src="../bower/quo.gestures.js"></script>

    <script>

        window.log = function(text) {
            $$(".logger").append($$("<div>" + text + "</div>"));
        }

        $$("ul > li").swipingHorizontal(function(e) {
            this.style.webkitTransition = "none";
            this.style.webkitTransform = "translateX(" + e.quoData.delta.x + "px)";
            e.originalEvent.preventDefault();
        });
        $$("ul > li").swipe(function() {
            this.style.webkitTransition = "all .5s ease";
            this.style.webkitTransform = "translateX(0px)";
        });
    </script>
</body>
</html>
